import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { applyMiddleware, createStore,combineReducers } from 'redux';
import { createLogger } from 'redux-logger';
import { connect, Provider } from 'react-redux'
import { Reducers } from './ReduxMiddleware/reducers'
import { actions } from './ReduxMiddleware/action'
import thunk from 'redux-thunk';
import PropTypes from 'prop-types'
import THUNK from './ReduxMiddleware/redux-thunk'
import APP from './React-Redux/app'

//1:Redux 直接把  ./Rudex/index.js  代码复制过来即可

//2:ReduxReduxMiddleware
//#region   2:ReduxReduxMiddleware
// const Counter = ({ value, onIncrement, onDecrement }) => (
//   <div>
//     <h1>{value}</h1>
//     <button onClick={onIncrement}>+</button>
//     <button onClick={onDecrement}>-</button>
//   </div>
// );

// let store = createStore(Reducers);

// store = createStore(
//   Reducers,
//   applyMiddleware(thunk, createLogger())
// );



// const render = () => {
//   ReactDOM.render(
//     <>
//       <Counter
//         value={store.getState().ADDreducer}
//         onIncrement={() => store.dispatch(actions[0])}
//         onDecrement={() => store.dispatch(actions[4])}
//       />
//       <THUNK store={store} />
//     </>,
//     document.getElementById('root')
//   );
// };

// render();
// store.subscribe(render);
//#endregion



//3:react-redux

//ReactDOM.render(< APP/>,  document.getElementById('root'))

//或者把下面的注释放开

//#region  react-redux
//React component
class Counter extends Component {
  render() {
    const { value, onIncreaseClick, children, onDecrementClick,dispatch } = this.props
    return (
      <div>
        {children}
        <input ref={node => this.input = node} />
        <button onClick={onIncreaseClick}>+</button>
        <span>{value}</span>
        <button onClick={onDecrementClick}>-</button>
      </div>
    )
  }
}

class Counter2 extends Component {
  render() {
    const { value } = this.props
    return (
      <div>
        <span>{value}</span>
      </div>
    )
  }
}


Counter.propTypes = {
  value: PropTypes.number.isRequired,
  onIncreaseClick: PropTypes.func.isRequired,
  onDecrementClick: PropTypes.func.isRequired
}

// Action
const increaseAction = { type: 'increase' }
const decrementAction = { type: 'decrement' }

// Reducer
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case 'increase':
      return { count: count + 1 }
    case 'decrement':
      return { count: count - 1 }
    default:
      return state
  }
}





const ADDreducer = (state = 0, action) => {
  switch (action.type) {
      case 'ADD1':
          return state + action.value;
      default:
          return state;
  }
};

const DELreducer = (state = 0, action) => {
  switch (action.type) {
      case 'DEL1':
          return state - action.value;
      default:
          return state;
  }
};

const ThunkTest = (state = {}, action) => {
  switch (action.type) {
      case 'getdata':
          return action.data;
      default:
          return state;
  }
};



const Four = combineReducers({
  ADDreducer,
  DELreducer,
  ThunkTest,
  counter
})



// Store
const store = createStore(Four)

// Map Redux state to component props
function mapStateToProps(state, ownProps) {
  return {
    value: state.counter.count + ownProps.value
  }
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch, ownProps) {
  return {
    onIncreaseClick: () => dispatch({
      type: 'increase',
      filter: ownProps.value
    }),
    onDecrementClick: () => dispatch(decrementAction)
  }
}

// Connected Component
//connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

const App2 = connect(
  mapStateToProps
)(Counter2)

ReactDOM.render(
  <Provider store={store}>
    <App value={100}>孩子</App>
    <App2 value={200}>孩子</App2>
  </Provider>,
  document.getElementById('root')
)

//#endregion